<template>
  <div style="width: 100%;position=relative" class="homevidel">
    <img
      src="./images/背景叠加效果.png"
      style="width: 100%; height: 100%; position: absolute; top: 0"
      alt=""
    />
    <div class="toptitle">
      <img src="./images/title.png" style="width: 100%" />
      <div class="titlemsg">{{ titlemsg }}</div>
    </div>

    <video
      src="./bgvideo.mp4"
      style="
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
      "
      loop="loop"
      autoplay
      id="myvideo"
      muted="muted"
    ></video>
    <div class="custabs" v-show="iddetal">
      <div
        class="childtabs"
        @click="showTabs(1)"
        :class="{ activeTabsmy: valueTabs == 1 }"
      >
        视频监控&nbsp;
      </div>
      <div
        class="childtabs"
        @click="showTabs(2)"
        :class="{ activeTabsmy: valueTabs == 2 }"
      >
        劳务实名制
      </div>
      <div class="timebox" v-if="valueTabs == 2">{{ nowtiem }}</div>
    </div>
    <div v-if="valueTabs == 1">
      <div class="c_wrap" v-if="iddetal">
        <div class="carandsearch">
          <div class="search">
            <el-form
              :inline="true"
              :model="searchForm"
              class="demo-form-inline"
            >
              <el-form-item>
                <el-cascader
                  :options="options"
                  :props="{
                    checkStrictly: true,
                    value: 'id',
                    label: 'orgName',
                    children: 'orgModelList',
                  }"
                  v-model="searchForm.cascader"
                  separator="-"
                  popper-class="mycascader"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item>
                <el-input
                  clearable
                  v-model="searchForm.project"
                  placeholder="项目名称"
                ></el-input>
              </el-form-item>
              <div>
                <el-button type="primary" @click="onSubmit" class="shadeBtn"
                  >查询</el-button
                >
              </div>
            </el-form>
          </div>
          <carousel-3d
            :autoplay="false"
            :autoplayTimeout="3000"
            :display="3"
            :width="boxwidth"
            :height="boxheight"
            :loop="false"
            :space="boxwidth"
            :controlsVisible="true"
          >
            <slide
              class="carousel_box"
              v-for="(item, index) in earthData"
              :key="index"
              :index="index"
            >
              <div class="carousel_flashlight">
                <div class="bottombox" @click="todetil(item.topbox)">
                  <div class="mybox">
                    <img :src="item['topbox'].myimg" />
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.topbox['projectName']"
                      placement="top"
                    >
                      <div class="projectbox">
                        {{ item["topbox"].projectName || "" }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
                <div class="bottombox" @click="todetil(item.bottombox)">
                  <div class="mybox">
                    <img :src="item['bottombox'].myimg" />
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.bottombox['projectName']"
                      placement="top"
                    >
                      <div class="projectbox">
                        {{ item["bottombox"].projectName || "" }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </slide>
          </carousel-3d>
        </div>
      </div>
      <deteal
        v-else
        :detparams="detparams"
        :key="detealkey"
        @editiddetal="editiddetal"
      ></deteal>
    </div>
    <screenAdapter>
      <screen
        v-if="valueTabs == 2"
        :sceenloading="sceenloading"
        :dataobj="dataobj"
      ></screen>
    </screenAdapter>
  </div>
</template>
<script>
import {
  findThreeOrg,
  queryBigMonitorScreenProject,
  debounceFn,
  queryBigMonitorScreenJksbxx,
  queryBigMonitorScreen2checkOn,
  queryBigMonitorScreen2Person,
  queryBigMonitorScreen2Project,
  getpercentage,
} from "./apiindex";
import Slide from "./carousel-3d/Slide.vue";
import Carousel3d from "./carousel-3d/Carousel3d.vue";
import deteal from "./videoDetail.vue";
import util from "@/utils/util";
import screen from "./entrance.vue";
// import screen from "./entranceMap.vue";
import screenAdapter from "./screenAdapter.vue";

const dayjs = require("dayjs");
export default {
  components: {
    Carousel3d,
    Slide,
    deteal,
    screen,
    screenAdapter,
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.oncegetpro();
      vm.getscreen();
    });
  },
  mounted() {
    document.getElementById("myvideo").playbackRate = "0.75";
    this.getfintree(); //获取组织
    setTimeout(() => {
      this.boxheight = document.body.clientHeight / 1.35;
    }, 0);
    setTimeout(() => {
      this.sceenloading = true;
    }, 3000);
    this.timer = setInterval(() => {
      this.nowtiem = dayjs().format("YYYY-MM-DD HH:mm");
    }, 1000);
  },
  watch: {
    imglist: function (a, b) {
      this.setImg(this);
    },
  },
  methods: {
    getscreen() {
      let that = this;
      let p1 = new Promise((res, rej) => {
        queryBigMonitorScreen2checkOn()
          .then((obj) => {
            const { data } = obj;
            console.log(data.data);
            that.dataobj.statistics.enter = data.data["enter"];
            that.dataobj.statistics.out = data.data["out"];
            that.dataobj.statistics.paid = data.data["paid"];
            that.dataobj.information[0].value = data.data["考勤人数"];
            that.dataobj.information[1].value = getpercentage(
              data.data["考勤人数"],
              data.data["场内人数"],2,false
            );
            that.dataobj.information[2].value = data.data["30天未打卡人数"];
            that.dataobj.attendance = data.data["考勤情况"];
            Object.keys(data.data["rank"]).forEach((item) => {
              that.dataobj.tableData.push(data.data["rank"][item]);
            });
            that.dataobj.tableData.map((item) => {
              item["paidmy"] = getpercentage(
                item["30day_count"],
                item["inner"]
              );
            });
            res(data.data || null);
          })
          .catch(() => {
            rej();
          });
      });
      let p2 = new Promise((res, rej) => {
        try {
          queryBigMonitorScreen2Person()
            .then((obj) => {
              const { data } = obj;
              that.dataobj.age = data?.data?.age || that.dataobj.age;
              that.dataobj.manager =
                data?.data?.manager || that.dataobj.manager;
              that.dataobj.provinceTimesto =
                data?.data?.provinceTimes || that.dataobj.provinceTimesto;
              that.dataobj.sex = data?.data?.sex || that.dataobj.sex;
              that.dataobj.workTimes =
                data?.data?.workTimes || that.dataobj.workTimes;
              res(data.data || null);
            })
            .catch(() => {
              rej();
            });
        } catch {
          res();
        }
      });
      let p3 = new Promise((res, rej) => {
        try {
          queryBigMonitorScreen2Project()
            .then((obj) => {
              const { data } = obj;
              that.dataobj.all = data?.data?.all || that.dataobj.all;
              that.dataobj.building =
                data?.data?.building || that.dataobj.building;
              that.dataobj.finish = data?.data?.finish || that.dataobj.finish;
              that.dataobj.stop = data?.data?.stop || that.dataobj.stop;
              that.dataobj.provinceTimes =
                data?.data?.provinceTimes || that.dataobj.provinceTimes;
              res(data.data || null);
            })
            .catch(() => {
              rej();
            });
        } catch {
          res(null);
        }
      });
      Promise.all(
        [p1, p2, p3].map((p) =>
          p.catch((e) => {
            e;
          })
        )
      )
        .then((res) => {
          console.log("res=>", res);
          this.sceenloading = true;
        })
        .catch((error) => {
          console.log("error=>", error);
          this.sceenloading = true;
        });
    },
    showTabs(value) {
      this.$nextTick(() => {
        this.valueTabs = value;
      });
    },
    setImg: debounceFn((vm) => {
      vm.datalist.map((item) => {
        vm.imglist.map((obj) => {
          if (item.dataBaseName == obj.databaseName) {
            item.myimg = obj.homeimg;
          }
        });
      });
      vm.sethomecontent();
    }, 300),
    async getfintree() {
      try {
        await findThreeOrg().then((res) => {
          this.options = res.data.data || [];
        });
        this.cascaderList();
      } catch {
        console.log("无网络");
      }
    },
    async oncegetpro(obj = {}) {
      this.isload = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgb(1, 7, 42,.5)",
      });
      try {
        await queryBigMonitorScreenProject(obj).then((res) => {
          this.datalist = res.data.data.projectList || [];
          if (util.isEmptyObject(obj)) {
            console.log("获取");
            this.gethomeimg();
          } else {
            console.log("设置");
            this.sethomeimg();
          }
        });
      } catch {
        this.isload.close();
        console.log("加载失败");
      }
    },
    todetil(item) {
      if (item.projectName == "暂无项目") return;
      this.titlemsg = item.projectName;
      this.detparams = item.dataBaseName;
      this.detealkey = Math.random();
      this.iddetal = false;
    },
    onSubmit() {
      let belongOrg =
        Array.isArray(this.searchForm.cascader) &&
        this.searchForm.cascader.length > 0
          ? this.searchForm.cascader.pop()
          : "";
      let obj = {
        belongOrg,
        projectName: this.searchForm.project,
      };
      this.oncegetpro(obj);
    },
    cascaderList() {
      function fn(arr) {
        return arr.map((item) => {
          if (item.orgModelList && item.orgModelList.length > 0) {
            fn(item.orgModelList);
          } else {
            item.orgModelList = null;
          }
          return item;
        });
      }
      this.options = fn(this.options);
    },
    editiddetal() {
      this.iddetal = true;
      this.titlemsg = "中冶建研院智慧管控驾驶仓";
    },
    gethomeimg() {
      console.log(this.datalist, "this.datalistthis.datalist");
      let that = this;
      return new Promise(async (resa, reja) => {
        await this.datalist.map(async (item, index) => {
          let parmas = {
            databaseName: item.dataBaseName,
            pageNum: 1,
            pageSize: 50,
          };
          await queryBigMonitorScreenJksbxx(parmas).then((res) => {
            if (res?.data?.data?.data[0]?.picUrl) {
              that.imglist.push({
                databaseName: item.dataBaseName,
                homeimg: res.data.data.data[0].picUrl,
                id: res.data.data.data[0].id,
              });
            }
          });
        });
      });
    },
    sethomeimg() {
      let list = JSON.parse(JSON.stringify(this.imglist));
      this.imglist = [];
      list.map((item) => {
        this.imglist.push(item);
      });
    },
    sethomecontent() {
      let list = this.datalist || [];
      this.earthData = [];
      let flag = list.length == 3 ? true : false;
      let obj = {};
      if (list.length > 0) {
        obj = JSON.parse(JSON.stringify(list[0]));
        obj.projectName = "暂无项目";
      }
      obj["myimg"] = require("./images/projtcebg.png");
      for (let i = 0; i < list.length; i++) {
        list[i]["myimg"] = list[i]["myimg"]
          ? list[i]["myimg"]
          : require("./images/projtcebg.png");
        if (flag) {
          this.earthData.push({
            topbox: list[i],
            bottombox: obj,
          });
        } else {
          if (i % 2 == 0) {
            this.earthData.push({
              topbox: list[i],
              bottombox: list[i + 1] ? list[i + 1] : obj,
            });
          }
        }
      }
      for (let j = 0; j < 6; j++) {
        if (this.earthData.length < 3) {
          this.earthData.push({
            topbox: obj,
            bottombox: obj,
          });
        }
      }
      this.isload.close();
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  data() {
    return {
      earthData: [
        {
          topbox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
          bottombox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
        },
        {
          topbox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
          bottombox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
        },
        {
          topbox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
          bottombox: {
            myimg: require("./images/projtcebg.png"),
            projectName: "暂无项目",
          },
        },
      ],
      boxwidth: document.body.clientWidth / 3.4,
      boxheight: 0,
      loading: false,
      // 当前页数
      pageNum: 1,
      // 总页数
      countPage: 5,
      pageSize: 10,
      options: [],
      searchForm: {
        project: "",
        cascader: [],
      },
      iddetal: true,
      titlemsg: "中冶建研院智慧管控驾驶仓",
      detparams: "",
      detealkey: Math.random(),
      datalist: [],
      imglist: [],
      isload: null,
      activeName: "",
      valueTabs: 1,
      timer: dayjs().format("YYYY-MM-DD HH:mm"),
      nowtiem: "",
      sceenloading: false,
      dataobj: {
        manager: {
          项目总人数: 2,
          管理人员: 0,
          建筑工人: 0,
          黑名单人员: 0,
        },
        workTimes: {
          其它: 0,
          钢筋工: 0,
        },
        sex: {
          男: 1,
          女: 1,
        },
        age: {
          "18-25": 0,
          "26-40": 0,
          "41-50": 0,
          "50-60": 0,
          "60以上": 0,
        },
        provinceTimesto: {
          暂无项目: 0,
        },
        all: 0,
        stop: 0,
        finish: 0,
        building: 0,
        provinceTimes: {},
        tableData: [],
        information: [
          {
            name: "当日出勤人数",
            value: "0",
          },
          {
            name: "当日出勤率",
            value: "0",
          },
          {
            name: "30日内未考勤人数",
            value: "0",
          },
        ],
        statistics: {
          enter: 0,
          out: 0,
          paid: 0,
        },
        attendance: [],
      },
    };
  },
};
</script>

<style lang="scss">
::-webkit-scrollbar {
  display: none !important;
  width: 6px; //对垂直方向滚动条
  height: 6px; //对水平方向滚动条
}
.mycascader {
  background-color: rgb(21, 48, 113) !important;
  color: #fff;
  border: 1px solid rgb(59, 126, 186) !important;
  .el-cascader__dropdown {
    background: rgb(21, 48, 113) !important;
  }

  .el-cascader-menu {
    border-right: 1px solid rgb(59, 126, 186);
    color: #fff;
  }
  .el-cascader-node:hover {
    background-color: rgba(17, 42, 102, 0.9) !important;
  }
  .is-selectable {
    background-color: rgb(17, 42, 102, 0.1) !important;
  }
  .in-active-path {
    background-color: rgb(17, 42, 102, 0.1) !important;
  }
}
.homevidel {
  overflow: hidden;
  height: 100%;
  .activeimg {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
  }
  .custabs {
    position: absolute;
    width: 100%;
    // height: 23px;
    font-size: 0.5rem;
    font-weight: normal;
    color: #ffffff;
    // line-height: 25px;
    font-weight: 600;
    text-shadow: 0px 4px 7px rgb(3 21 100 / 25%);
    background: linear-gradient(0deg, #25b5fb 0%, #ffffff 99.5849609375%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 20;
    display: flex;
    align-items: center;
    top: 5vh;
    .timebox {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 2.5vh;
      height: 50px;
      float: right;
      padding-right: 6.5%;
      text-shadow: 0px 4px 7px rgb(3 21 100 / 25%);
      background: linear-gradient(0deg, #25b5fb 0%, #ffffff 99.5849609375%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .childtabs {
      cursor: pointer;
      // height: 50px;
      height: 10vh;
      text-shadow: 0px 4px 7px rgb(3 21 100 / 25%);
      background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        from(#25b5fb),
        color-stop(99.5849609375%, #ffffff)
      );
      background: linear-gradient(0deg, #25b5fb 0%, #ffffff 99.5849609375%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 2vh;
    }
    .childtabs:nth-child(1) {
      margin-left: 6%;
    }
    .activeTabsmy {
      font-size: 2.7vh;

      color: white;
      opacity: 1 !important;
      background: url("./images/activeimg.png");
      background-repeat: no-repeat;
      // background-size: 100px;
      // background-size: 80%;
      background-size: 105px;
      background-position: center;
      // background-position-y: -17%;
    }
    .childtabs:nth-child(2) {
      margin-left: 4vh;
    }
  }
  .toptitle {
    z-index: 1;
    position: absolute;
    top: 0;
    width: 99%;
    .titlemsg {
      position: absolute;
      top: 1.2vh;
      width: 100%;
      padding-top: 0.3%;
      text-align: center;
      font-size: 2.5vh;
      letter-spacing: 3px;
      background-image: -webkit-linear-gradient(
        bottom,
        rgb(254, 255, 255),
        rgb(140, 196, 242)
      );
      font-weight: 600;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    img {
      width: 100%;
    }
  }
  .el-loading-spinner .el-loading-text {
    color: #fff;
  }
  .goback {
    color: #88cbe6;
    font-size: 18px;
    font-weight: 600;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    top: 32px;
    left: 34px;
    display: flex;
    align-items: center;
  }

  .search {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1000;
    transform: translate(0, 14vh);
    .el-form {
      display: flex;
      // align-items: center;
      justify-content: center;
      .el-form-item {
        margin-right: 2.5vh;
        width: 35%;
      }
    }

    .shadeBtn {
      font-weight: 600;
      border: none;
      cursor: pointer;
      background: -webkit-gradient(
        linear,
        100% 0%,
        0% 0%,
        from(rgb(52, 195, 255)),
        to(rgb(2, 97, 254))
      );
    }
    .popper__arrow {
      // 修改下拉框popper
      border-bottom-color: rgb(70, 115, 232) !important;
    }

    .popper__arrow::after {
      border-bottom-color: rgb(70, 115, 232) !important;
    }

    .el-input__inner {
      // 修改input框样式
      background-color: rgb(21, 48, 113) !important;
      border: 1px solid rgb(67, 96, 174);
      color: #fff;
    }

    .el-range-input {
      // 修改时间选择器input框样式
      background-color: rgb(21, 48, 113) !important;
      color: #fff;
    }

    .el-select-dropdown {
      background-color: rgb(21, 48, 113) !important;
      border: 1px solid rgb(70, 115, 232);
    }

    .el-select-dropdown__item {
      // 修改下拉框选项样式
      &:hover {
        color: #fff;
      }
      background-color: rgb(21, 48, 113) !important;
    }
  }
  #user-table {
    position: absolute;
    overflow-y: scroll;
    /* padding: 9% 5% 0% 5%; */
    padding: 9% 5% 0% 5%;
    &::-webkit-scrollbar {
      width: 6px; //对垂直方向滚动条
      height: 6px; //对水平方向滚动条
    }
    #videobox {
      display: flex;
      align-items: center;
      flex-flow: wrap;
      justify-content: flex-start;
      .box {
        width: 32%;
        margin-bottom: 10px;
        z-index: 1011;
        color: #fff;
        // margin-right: 13px;
        margin-right: 1vh;
        .idbox {
          width: 100%;
          .video-js .vjs-tech {
            position: relative !important;
          }
        }
      }
      .bottommsg {
        background: #0753a0;
        // width: 96%;
        position: relative;
        padding: 5px 0 5px 0;
        top: -4px;
        .videoname {
          padding: 0 12px;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .dianwei {
          font-size: 14px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          padding: 0 12px;
          display: none;
          .left {
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
          .right {
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
          }
        }
      }
    }
  }
  .c_wrap {
    margin-top: 20px;
    .carousel-3d-container {
      padding: 10px;
      margin-top: 11vh;
      .mybox {
        width: 100%;
        position: relative;
        border: 1px solid #749fe2;
        overflow: hidden;
      }
    }
    .carousel_flashlight {
      height: 100%;
      img {
        height: 98%;
        width: 100%;
      }
      .projectbox {
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        background: #1a2d69;
        color: #fff;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 3px 10px 3px 10px;
        font-size: 2.1vh;
      }
      .bottombox {
        margin-top: 10px;
        // width: 95%;
        cursor: pointer;
        border: 1px solid #749fe2;
        position: relative;
        padding: 0.5vh;
        height: 41%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          // width: 52vh;
          height: 29vh;
        }
      }
    }
  }
}
</style>
